<template>
	<div class="count-cs">{{userCount}}</div>
	<el-row>
		<el-col :span="24">

		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12">
			<div @click="aiRoom" class="inline-flex panel-prod" :style="{ boxShadow: `var(--el-box-shadow-dark)`,}">
				AI-聊天室 ></div>
		</el-col>
		<el-col :span="12">
			<div @click="callRandom" class="inline-flex panel-prod" :style="{ boxShadow: `var(--el-box-shadow-dark)`,}">
				随机点名 >
			</div>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12">
			<div @click="commentWall" class="inline-flex panel-prod" :style="{ boxShadow: `var(--el-box-shadow-dark)`,}">留言墙 ></div>
		</el-col>
		<el-col :span="12">
			<div class="inline-flex panel-prod" :style="{ boxShadow: `var(--el-box-shadow-dark)`,}"></div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		defineComponent
	} from 'vue';

	export default defineComponent({
		methods: {
			aiRoom() {
				this.$router.push('/ai-room');
			},
			callRandom(){
				this.$router.push('/call-random');
			},
			commentWall(){
				this.$router.push('/comment-wall');
			}
		},
		// 在组件中访问全局数据
		computed: {
			userCount() {
				return this.$globalData.userCount;
			}
		}
	});
</script>

<style>
	.panel-prod {
		height: 80px;
		width: 150px;
		margin-left: 20px;
		margin-top: 80px;
		text-align: center;
		line-height: 80px;
	}

	.count-cs {
		position: absolute;
		top: 30px;
		right: 0px;
		width: 50px;
		text-align: left;
		background: #e7e9e9;
		color: #7dbdeb;
	}
</style>